<template>
  <div class="search-sites" label="站名/区域">
    <el-select
      v-model="site"
      filterable
      remote
      reserve-keyword
      placeholder="请输入站点"
      size="mini"
      :remote-method="getSites"
      :loading="siteSearching"
      @change="changed"
      @focus="getSites('')"
    >
      <el-option
        v-for="item in sites"
        :key="item.stationNumber"
        :label="item.stationName"
        :value="item.stationName"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { getAction } from '@/api/action';
export default {
  name: 'SearchSites',
  props: {
    siteName: String,
  },
  data() {
    return {
      urls: {
        sites: '/api/sites/getAllSites', // 查询所有站点
        getSites: '/api/sites/getByNoStaionData', // 模糊查询站点信息
      },
      siteSearching: false,
      sites: [],
      site: "梧州市",
    }
  },
  watch: {
    siteName(newSite) {
      console.log('siteName', newSite);
      this.site = newSite;
    },
  },
  methods: {
    // 查询站点
    async getSites(StaionName) {
      this.siteSearching = true;
      await getAction(this.urls.getSites, { StaionName }).then(res => {
        if (res.msg === '成功') {
          this.sites = res.objects;
        }
      })
      this.siteSearching = false;
    },
    // 输入框聚焦时，默认查询5条
    // initSites() {
    //   getAction(this.urls.sites, {
    //     pageNo: 1,
    //     pageSize: 5
    //   }).then((res) => {
    //     // console.log(res);
    //     this.sites = res.objects;
    //   })
    // },

    changed(e) {
      // 选择后触发
      // console.log('changed', e);
      this.$emit('change-site', e)
    },
  }
}
</script>

<style>
</style>